<template>
  <div>
    <!-- 头部 -->
    <div class="m-b-20 ovf-hd">
      <!-- 页面跳转 -->
      <div class="fl">
        <el-button type="primary" icon="document" @click="AddItems(1)">现金转到电子币</el-button>
        <el-button type="primary" icon="document" @click="AddItems(2)">电子币转到现金</el-button>
      </div>
    </div>
    <!-- 头部 -->

    <!-- 头部 -->
    <el-form ref="form" :model="form" label-width="180px" :inline="true" style="background:#fff;padding:20px 0;">
      <el-form-item label="用户名">
        <el-input v-model="form.username" width="100px" :disabled="true" size="medium" class='width-input-my'></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.cellphone" :disabled="true" class='width-input-my'></el-input>
      </el-form-item>

      <!-- 钱包 -->
      <el-form-item label="账户余额">
        <el-input v-model="form.balance" class='width-input-my' :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="积分余额">
        <el-input v-model="form.point" class='width-input-my' :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="电子币余额">
        <el-input v-model="form.emoney" class='width-input-my' :disabled="true"></el-input>
      </el-form-item>
      <!-- 钱包 -->

      <el-form-item label="支付密码">
        <el-input v-model="form.paypassForModify" class='width-input-my' type='password' ></el-input>
      </el-form-item>

      <!-- 银行卡 -->
      <el-form-item label="银行卡号">
    <el-input v-model="form.bankNumber" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="银行名称">
    <el-input v-model="form.bankName" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="开户行">
    <el-input v-model="form.bankAddress" class='width-input-my'></el-input>
  </el-form-item>
  <el-form-item label="持卡人">
    <el-input v-model="form.cardholder" class='width-input-my'></el-input>
  </el-form-item>
      <!-- 银行卡 -->

      <!-- 地址 -->
      <el-form-item label="省">
        <el-select filterable v-model="form.province" placeholder="请输入省" class="w-200" :disabled="true">
          <el-option v-for="(option,index) in selectData.province" :key="index" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select filterable v-model="form.city" placeholder="请输入市" class="w-200" :disabled="true">
          <el-option v-for="(option,index) in selectData.city" :key="index" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区">
        <el-select filterable v-model="form.hometown" placeholder="请输入区" class="w-200" :disabled="true">
          <el-option v-for="(option,index) in selectData.hometown" :key="index" :label="option.label" :value="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.detailAddress"  type="textarea" autosize class='width-input-my' :disabled="true"></el-input>
      </el-form-item>
      <!-- 地址 -->

      <!-- 转让电子币 -->
      <el-dialog title="转让电子币" :visible.sync="Add.dialogFormVisible1">
        <el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
          <el-form-item label="转让金额">
            <el-input v-model="Add.data.form.change" class='width-input-my'></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Add.dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="commitAdd(1)">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 转让电子币 -->

      <!-- 转让余额 -->
      <el-dialog title="转让余额" :visible.sync="Add.dialogFormVisible2">
        <el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
          <el-form-item label="转让金额">
            <el-input v-model="Add.data.form.change" class='width-input-my'></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Add.dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="commitAdd(2)">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 转让余额 -->

      <el-form-item style="display:block;text-align:center;">
        <el-button type="primary" @click="onSubmit">保存修改</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import http from "assets/js/http.js";
import cities from "assets/data/address.json";

export default {
  data() {
    return {
      Add: {
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        data: {
          form: {
            change: null
          }
        },
        config: {
          rules: {
            change: [{ required: true, message: "请输入转换金额!" }]
          }
        }
      },
      selectData: {
        province: [],
        city: [],
        hometown: []
      },
      form: {
        province: "",
        city: "",
        hometown: ""
      }
    };
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    init() {
      // 监听省
      this.$watch("form.province", {
        deep: true,
        handler: function() {
          this.getClearCity();
        }
      });
      // 监听市
      this.$watch("form.city", {
        deep: true,
        handler: function() {
          this.getClearHomwtown();
        }
      });
    },
    AddItems(type) {
      switch (type) {
        case 1:
          this.Add.dialogFormVisible1 = true;
          break;
        case 2:
          this.Add.dialogFormVisible2 = true;
          break;
      }
    },
    onSubmit() {
      this.apiPut("pudu/members" + "/", "1", this.form).then(res => {
        this.handelResponse(res, data => {
          console.log(res);
          _g.toastMsg("success", "编辑成功");
        });
      });
    },
    getPersonInfo() {
      let url = "pudu/members/1";
      this.apiGet(url).then(res => {
        this.handelResponse(res, data => {
          for (let i in data) {
            if (i == "level") {
              switch (data[i]) {
                case 0:
                  data.levelTitle = "非董事";
                  break;
                case 1:
                  data.levelTitle = "一星董事";
                  break;
                case 2:
                  data.levelTitle = "二星董事";
                  break;
                case 3:
                  data.levelTitle = "三星董事";
                  break;
                case 4:
                  data.levelTitle = "四星董事";
                  break;
                case 5:
                  data.levelTitle = "五星董事";
                  break;
                case 6:
                  data.levelTitle = "六星董事";
                  break;
                case 7:
                  data.levelTitle = "七星董事";
                  break;
              }
            }
          }
          this.form = data;
          this.getAddress();
          this.getCity();
          this.getHomwtown();
          this.init();
          _g.closeGlobalLoading();
        });
      });
    },
    getCity() {
      // TODO 清除已有的市信息
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province]) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.city[this.selectData.city.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getHomwtown() {
      // TODO 清除已有的市信息
      this.selectData.hometown = [];
      console.log(cities[this.form.province][this.form.city]);
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province][this.form.city]) {
        tmp.label = cities[this.form.province][this.form.city][i];
        tmp.value = cities[this.form.province][this.form.city][i];
        this.selectData.hometown[this.selectData.hometown.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getClearCity() {
      // TODO 清除已有的市信息
      this.selectData.city = [];
      this.form.city = "";
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province]) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.city[this.selectData.city.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getClearHomwtown() {
      this.form.hometown = "";
      // TODO 清除已有的市信息
      this.selectData.hometown = [];
      console.log(cities[this.form.province][this.form.city]);
      let tmp = {};
      // 获取省的数据
      for (let i in cities[this.form.province][this.form.city]) {
        tmp.label = cities[this.form.province][this.form.city][i];
        tmp.value = cities[this.form.province][this.form.city][i];
        this.selectData.hometown[this.selectData.hometown.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
    },
    getAddress() {
      let tmp = {};
      // 获取省的数据
      for (let i in cities) {
        tmp.label = i;
        tmp.value = i;
        this.selectData.province[this.selectData.province.length] = JSON.parse(
          JSON.stringify(tmp)
        );
      }
      console.log(this.selectData.province);
    },
    commitAdd(type) {
      switch (type) {
        case 1:
          this.Add.data.form.type = 1;
          break;
        case 2:
          this.Add.data.form.type = 2;
          break;
      }

      this.apiPut("pudu/members/", "change", this.Add.data.form).then(res => {
        this.handelResponse(res, data => {
          _g.toastMsg("success", "转换成功");
          setTimeout(() => {
            _g.shallowRefresh(this.$route.name);
          }, 1500);
        });
      });
    }
  },
  mixins: [http]
};
</script>

<style>
.width-input-my {
  width: 200px;
}
.width-input-my textarea  {
  min-height: 40px!important;
  font-family: "Helvetica Neue";
}
</style>
